<template>
  <div class="bg">
    <canvas class="bg-canvas" ref="canvasRef"></canvas>
  </div>
  <div>
    <h1>Login</h1>
    <el-button type="primary" @click="toExample">to Example</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { Background} from './bg'

const router = useRouter()

const toExample = () => {
  router.push('/example')
} 

const canvasRef = ref<HTMLCanvasElement>()

onMounted(() => { 

  if (!canvasRef.value) return
  const bg = new Background(canvasRef.value,100 , 250)
  bg.draw()
})


</script>

<style scoped lang="scss">
body {
  background-color: #00000080;
}
.bg-canvas{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
</style>